<template>
	<view class="container">
		<view class="car-list" v-if="member.carNo">
			<view class="item">
        <view class="car-panel">
          <view class="pass" :class="{'isElectrical': isElectrical(member.carNo)}">
            <view class="num">{{formatCarNum(member.carNo)}}</view>
          </view>
          <view class="info">
            <view class="brand"><text>品牌：</text>{{member.carBrand}}</view>
            <view class="total"><text>里程：</text>{{member.carRange}}KM</view>
          </view>
				</view>
				<view class="edit">
					<view class="put">
						<view class="item-btn">
              <uni-icons type="trash" size="24" color="#6A6A6A" />
							删除
						</view>
						<view class="item-btn" @click="addCar(true)">
              <uni-icons type="compose" size="24" color="#6A6A6A" />
							修改
						</view>
					</view>
				</view>
			</view>
		</view>
    <empty v-else></empty>
		<view class="submit" @click="addCar()"  v-if="!member.carNo">
			添加车辆
		</view>
	</view>
</template>

<script>
	import Empty from "@/components/empty.vue";

  export default {
    components: {Empty},
		data() {
			return {
				member: {}
			};
		},
		onShow() {
			let memberInfo = JSON.parse(uni.getStorageSync('memberInfo'))
			this.member = memberInfo.memberVo.member
		},
		methods: {
			addCar(data) {
				if (this.member.carNo && !data) return
				if (data) {
					uni.navigateTo({
						url: '/pages/personal-center/add-car/index?flag=' + data
					})
					return
				}
				uni.navigateTo({
					url: '/pages/personal-center/add-car/index'
				})
			},
      isElectrical(num){
        return num && num.length > 7;
      },
      formatCarNum(num){
        return num && num.slice(0, 2) + '·' + num.slice(2);
      }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.car-list {
			padding: 24rpx 30rpx 0rpx 30rpx;

			.item {
				padding: 32rpx 32rpx 24rpx 32rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

        .car-panel{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          border-bottom: 1px solid #F0F1F2;
          padding-bottom: 24upx;
          .pass{
            width: 320upx;
            height: 100upx;
            border-radius: 12upx;
            box-sizing: border-box;
            padding: 8upx;
            background: #0066CC;
            color: #FFFFFF;
            &.isElectrical{
              background: linear-gradient(180deg, #D2FFE8 0%, #00B050 100%);
              color: #1B1B1B;
              .num{
                border-color: #1B1B1B;
              }
            }
            .num{
              box-sizing: border-box;
              line-height: 88upx;
              border-radius: 12upx;
              border: 1px solid #FFFFFF;
              text-align: center;
              font-size: 40upx;
              font-weight: 500;
              height: 100%;
            }
          }
          .info{
            margin-left: 24upx;
            font-size: 28upx;
            color: #1B1B1B;
            line-height: 48upx;
            text{
              color: #9D9D9D;
            }
          }
        }

				.title {
					font-size: 34rpx;
					color: #2D2B2A;
					line-height: 48rpx;
				}

				.carNo {
					font-size: 28rpx;
					color: #2D2B2A;
					line-height: 40rpx;
					margin: 8rpx 0rpx 0rpx 0rpx;
				}

				.br {
					width: 100%;
					height: 2rpx;
					background: #F3F5F7;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin: 32rpx 0rpx 24rpx 0rpx;
				}

				.edit {
					display: flex;
					justify-content: space-around;

					.def-car {
						font-size: 26rpx;
						color: #2D2B2A;
						line-height: 36rpx;
					}

					.put {
						display: flex;
						align-items: center;
            width: 100%;
            padding-top: 24upx;
            .item-btn{
              width: 50%;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              //line-height: 76upx;
            }

						.del {
							margin-right: 42rpx;
							display: flex;
							align-items: center;
							font-size: 26rpx;
							color: #939391;
							line-height: 36rpx;

							image {
								width: 26rpx;
								height: 28rpx;
							}
						}

						.edit-info {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							color: #939391;
							line-height: 36rpx;

							image {
								width: 26rpx;
								height: 28rpx;
							}
						}
					}
				}
			}
		}

		.submit {
			padding: 0px 30rpx;
			position: fixed;
			width: 80%;
			bottom: 68rpx;
			left: 0px;
			right: 0px;
			margin: auto;
			height: 96rpx;
			line-height: 96rpx;
			background: #006241;
			opacity: 1;
			text-align: center;
			font-size: 32rpx;
      border-radius: 96upx;
			color: #FFFFFF;
		}
	}
</style>